<template>
	<view class="app app-bg">
		<view class="label">服务地址</view>
		<view class="address" v-if="address._id" @tap="select">
			<image class="icon2" src="@/static/icon/icon_order_location.png"></image>
			<view class="content">
				<text class="name">{{ address.name + " " + address.mobile }}</text>
				<text>{{ address.formatted_address }}</text>
			</view>
			<image class="icon3" src="@/static/icon/right.png"></image>
		</view>
		<view class="address empty" v-else @tap="select">
			<image class="icon" src="@/static/icon/icon_add.png"></image>
			<text>添加服务地址</text>
		</view>
		<view class="item" @tap="openTime">
			<text class="label">服务时间</text>
			<text class="value" v-if="time">{{ showTime }}</text>
			<text class="value place" v-else>请选择</text>
			<image class="icon" src="@/static/icon/right.png"></image>
		</view>
		<view class="item">
			<view class="info">
				<u-image
					border-radius="12"
					height="150"
					width="150"
					:src="project.thumb"
				></u-image>
				<view class="right">
					<text class="name">{{ project.title }}</text>
					<view class="time">
						<u-icon name="clock-fill" color="#3AB54A" size="30"></u-icon>
						<text>{{ project.time }}分钟</text>
					</view>
					<view class="money">
						<text style="font-weight: bold; flex: 1">
							{{ vk.pubfn.priceFilter(project.price) }}
						</text>
						<u-number-box
							bg-color="#F4F6F9"
							input-width="56"
							v-model="buyNum"
							:min="1"
							:disabled-input="true"
						></u-number-box>
					</view>
				</view>
			</view>
			<view class="ticket" @tap="popShow = true">
				<text class="label">优惠券</text>
				<text class="value disc" v-if="ticket">
					-￥{{ vk.pubfn.priceFilter(ticket.coupon_rule.discount_amount) }}
				</text>
				<text class="value place" v-else>请选择</text>
				<image
					src="@/static/icon/right.png"
					style="margin-right: -14rpx"
					class="icon"
				></image>
			</view>
		</view>
		<view class="item" @tap="popShow3 = true">
			<text class="label">出行方式</text>
			<text class="value" v-if="way">{{ way.label }}</text>
			<text class="value place" v-else>请选择</text>
			<image class="icon" src="@/static/icon/right.png"></image>
		</view>
		<view class="label top">备注</view>
		<view class="remark">
			<u-input v-model="remark" type="textarea" height="180" />
		</view>
		<view class="btn" @tap="send">确定</view>
		<!-- 优惠券 -->
		<u-popup v-model="popShow" mode="bottom" closeable border-radius="30" length="45%">
			<ticket-mine
				:list="coupons"
				:price="proMoney"
				@itemClick="selectCoupon"
			></ticket-mine>
		</u-popup>
		<!-- 服务时间 -->
		<u-popup v-model="popShow2" mode="bottom" closeable border-radius="30" length="65%">
			<service-time
				v-if="popShow2"
				ref="serTime"
				:agent="timeAgent"
				:shifu="timeShifu"
				@select="selectTime"
			></service-time>
		</u-popup>
		<!-- 出行方式 -->
		<u-select v-model="popShow3" :list="ways" @confirm="selectWay"></u-select>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import ticketMine from "./components/ticket-mine.vue"
import serviceTime from "./components/service-time.vue"

export default {
	components: { ticketMine, serviceTime },
	data() {
		return {
			// 基础信息
			sid: "",
			pid: "",
			// 订单信息
			address: {
				_id: "",
				name: "",
				mobile: "",
				detail: "",
				formatted_address: ""
			},
			time: "",
			project: { _id: "", title: "", thumb: "", time: 0, price: 0 },
			buyNum: 1,
			ticket: null,
			way: null,
			remark: "",
			// 弹框
			coupons: [],
			timeAgent: null,
			timeShifu: null,
			ways: [
				{ value: "bus", label: "公交" },
				{ value: "taxi", label: "出租" }
			],

			popShow: false,
			popShow2: false,
			popShow3: false,
			flag: false
		}
	},
	onLoad(opt = {}) {
		if (!opt.sid || !opt.pid) {
			return vk.toast("参数不足", "none", 1000, () => {
				vk.navigateBack()
			})
		} else {
			this.sid = opt.sid
			this.pid = opt.pid
		}
		uni.$on("orderAddr", v => {
			this.address = {
				_id: v._id,
				name: v.name,
				mobile: v.mobile,
				detail: v.position.name,
				formatted_address: v.formatted_address,
				location: v.location
			}
		})
		this.init()
	},
	computed: {
		proMoney() {
			return this.project.price * this.buyNum
		},
		showTime() {
			let now = vk.pubfn.timeFormat(new Date(), "MM-dd")
			let time = new Date(this.time).getTime()
			if (this.time.indexOf(now) != -1) {
				return vk.pubfn.timeFormat(time, "今天 hh:mm")
			}
			return vk.pubfn.timeFormat(time, "MM-dd hh:mm")
		}
	},
	methods: {
		// 初始化
		init() {
			vk.callFunction({
				url: "client/order.queryOrderInfo",
				title: "获取中...",
				needAlert: true,
				data: { pid: this.pid, sid: this.sid },
				success: res => {
					this.project = res.project
					if (res.address) this.address = res.address
					this.coupons = res.coupons
					if (res.coupon) this.ticket = res.coupon
					this.timeAgent = res.time_agent
					this.timeShifu = res.time_shifu
					this.flag = true
				},
				fail: err => {
					this.flag = false
				}
			})
		},
		// 选择地址
		select() {
			vk.navigateTo(`/pages/user/address/list?type=select`)
		},
		// 选择优惠券
		selectCoupon(e) {
			this.ticket = e
			this.popShow = false
		},
		// 选择服务时间
		openTime() {
			this.popShow2 = true
			this.$nextTick(() => {
				this.$refs.serTime.selected = this.time
			})
		},
		selectTime(e) {
			this.time = e
			this.popShow2 = false
		},
		// 出行方式
		selectWay(e) {
			this.way = e[0]
		},
		// 提交
		send() {
			const { address, time, buyNum, ticket, way, remark } = this
			if (!address._id) {
				return vk.toast("请选择地址")
			}
			if (!time) {
				return vk.toast("请选择服务时间")
			}
			if (!way) {
				return vk.toast("请选择出行方式")
			}
			vk.callFunction({
				url: "client/order.createdOrder",
				title: "提交中...",
				needAlert: true,
				data: {
					way,
					time,
					buyNum,
					ticket,
					remark,
					address,
					sid: this.sid,
					pid: this.pid
				},
				success: res => {
					vk.redirectTo(`./order-pay?id=${res.oid}`)
				}
			})
		}
	},
	onUnload() {
		uni.$off("orderAddr")
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 20rpx;
}

.label {
	font-weight: bold;
	padding: 0 10rpx 0 4rpx;
}

.address {
	background-color: #ffffff;
	border-radius: 12rpx;
	color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 18rpx;
	padding: 20rpx 24rpx 28rpx;
	min-height: 142rpx;
	.icon {
		width: 52rpx;
		height: 52rpx;
		margin-right: 20rpx;
	}
	.icon2 {
		width: 44rpx;
		height: 52rpx;
		margin-right: 20rpx;
	}
	.content {
		font-size: 26rpx;
		color: #999999;
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 0 6rpx;
		.name {
			font-size: 28rpx;
			font-weight: bold;
			color: #212121;
			line-height: 50rpx;
		}
	}
	.icon3 {
		width: 30rpx;
		height: 30rpx;
		margin: 12rpx -8rpx 0 0;
	}
}
.empty {
	min-height: 184rpx;
	padding-top: 28rpx;
}

.item {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 16rpx 20rpx;
	margin: 20rpx 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.value {
		flex: 1;
		text-align: right;
		padding: 18rpx 0;
		font-size: 26rpx;
	}
	.place {
		color: #999999;
	}
	.icon {
		width: 30rpx;
		height: 30rpx;
		margin: 0 -6rpx 0 6rpx;
	}
}

.info {
	padding: 16rpx 20rpx;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: #f4f6f9;
	border-radius: 12rpx;
	margin-top: 20rpx;
	width: 100%;
	.right {
		flex: 1;
		padding-left: 20rpx;
		.name {
			font-weight: bold;
			font-size: 28rpx;
		}
		.time {
			font-size: 24rpx;
			color: #999999;
			padding: 12rpx 0 18rpx;
			display: flex;
			align-items: flex-end;
		}
		.u-icon {
			margin-right: 6rpx;
		}
		.money {
			color: #ff0000;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			padding-left: 4rpx;
			&::before {
				content: "¥";
				font-size: 24rpx;
				font-weight: normal;
				margin-right: 2rpx;
			}
		}
		/deep/ .u-icon-plus,
		/deep/ .u-icon-minus {
			background-color: #3ab54a !important;
			color: #fff !important;
			width: 44rpx !important;
			border-radius: 4rpx !important;
			height: 44rpx !important;
		}
		/deep/ .u-icon-disabled {
			background-color: #d1d1d1 !important;
			color: #999999 !important;
		}
		/deep/ .num-btn {
			top: -2rpx !important;
			font-weight: normal;
		}
	}
}

.ticket {
	display: flex;
	align-items: center;
	flex: 1;
	padding: 14rpx 6rpx 0 2rpx;
	.disc {
		color: #ff0000;
	}
}

.top {
	padding: 26rpx 20rpx 0;
	background-color: #fff;
	border-radius: 12rpx 12rpx 0 0;
}
.remark {
	padding: 6rpx 20rpx;
	background-color: #f5f5f5;
	border-radius: 0 0 12rpx 12rpx;
	border-color: #fff;
	border-style: solid;
	border-width: 20rpx 20rpx 30rpx;
}

.btn {
	margin: 106rpx 4rpx 60rpx;
	padding: 22rpx;
	border-radius: 40rpx;
	background-color: #3ab54a;
	color: #fff;
	text-align: center;
}
</style>
